@import '../../../index.scss';

page {
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
}

.container {
  margin: 20rpx;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.0392);
  background-color: #fff;
  padding-bottom: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;

  .cover {
    width: 100%;
    height: 420rpx;
    overflow: hidden;
    position: relative;
    background-color: #f8f8f8;

    image {
      width: 100%;
      height: 100%;
    }

    .status {
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      font-size: 20rpx;
      color: #fff;
      background-color: #087f5b;
      padding: 6rpx 20rpx;
      border-radius: 8rpx;

      &.end {
        background-color: #ccc;
      }

      &.hid {
        background-color: #ff6b6b;
      }
    }


  }




  .box {
    padding: 30rpx 20rpx;
    box-sizing: border-box;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      background-color: #fff;
      padding-bottom: 20rpx;
      text-shadow: 10rpx 10rpx 4rpx $primary-color;
      /* 黑色阴影，透明度为0.7 */
    }

    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6rpx 0;

      .type {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }

      .cont {
        font-size: 28rpx;
        color: #888;
        display: flex;
        align-items: center;

        image {
          height: 24rpx;
          padding-left: 10rpx;
        }
      }
    }

    .apply {
      display: flex;
      justify-content: space-between;
      padding: 40rpx 30rpx;
      background-color: #efefef;
      margin-top: 10rpx;
      border-radius: 14rpx;
      align-items: center;

      .tip {
        font-size: 28rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        color: #666;

        .num {
          font-size: 28rpx;
          color: $primary-color;

        }
      }

      .btn {
        font-size: 24rpx;
        padding: 8rpx 30rpx;
        border: 1px solid $primary-color;
        color: $primary-color;
        border-radius: 100rpx;
        font-weight: bold;
      }

      .setting {
        // position: absolute;
        // right: 40rpx;
        // top: 40rpx;
        border: 1px solid $primary-color;
        width: 80rpx;
        height: 50rpx;
        background-color: rgba($color: #fff, $alpha: .75);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .content {
      padding-top: 30rpx;

      .type {
        font-size: 28rpx;
        padding-bottom: 20rpx;
        font-weight: bold;
      }

      .txt {
        font-size: 28rpx;
        color: #333;
      }
    }

  }

}

.setting-box {
  // height: 60vh;
  width: 100%;

  .list {
    padding: 40rpx 30rpx;

    button {
      margin-top: 30rpx;
    }

    .item {
      border-bottom: 1px solid #f8f8f8;
      padding: 30rpx 20rpx;
      text-align: center;
      font-size: 34rpx;
      margin: 20rpx 0;
      background-color: #eee;
      border-radius: 8rpx;
      color: #666;

      &.primary {
        background-color: $primary-color;
        color: #fff;
      }

      &.deger {
        background-color: #ff6b6b;
        color: #fff;
      }
    }
  }
}

.user-list {
  overflow: hidden;

  .title {
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: bold;
  }

  .box {
    // background-color: red;
    height: 50vh;
    overflow-y: auto;

    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;

      .left {
        display: flex;

        .avater {
          width: 88rpx;
          height: 88rpx;
          border-radius: 100%;
          overflow: hidden;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .user {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .name {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: bold;

            .lv {
              height: 30rpx;
              margin-left: 10rpx;
            }
          }

          .time {
            font-size: 20rpx;
            color: #999;
          }
        }
      }

      .right {
        .btn {
          border: 1px solid $primary-color;
          color: $primary-color;
          padding: 10rpx 40rpx;
          border-radius: 100px;
          font-size: 24rpx;
        }
      }
    }

    .isNoData {
      padding-top: 100rpx;
      text-align: center;
      color: #999;
      font-size: 26rpx;
    }
  }
}